<template>
  <view class="empty-container">
    <!-- 自定义图标或默认图标 -->
    <view class="empty-icon">
      <slot name="icon">
        <image class="custom-icon" src="/static/home/no-data.png"></image>
      </slot>
    </view>
    
    <!-- 自定义文字或默认文字 -->
    <view class="empty-text" :style="{ color: textColor }">
      <slot>{{ defaultText }}</slot>
    </view>
    
    <!-- 底部自定义内容 -->
    <view class="empty-extra" v-if="$slots.extra">
      <slot name="extra"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EmptyData',
  props: {
    // 默认提示文字
    defaultText: {
      type: String,
      default: '暂无数据'
    },
    // 自定义图标路径
    customIcon: {
      type: String,
      default: ''
    },
    // 文字颜色
    textColor: {
      type: String,
      default: '#999'
    }
  }
}
</script>

<style scoped>
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* width: 100%; */
  background-color: #fff;
}

.empty-icon {
  /* margin-bottom: 40rpx; */
}

.custom-icon {
    width: 400rpx;
    height: 400rpx;
}

.empty-text {
    font-size: 28rpx;
    color: #999999;
    text-align: center;
    margin-bottom: 48rpx;
}

.empty-extra {
  /* margin-top: 15px; */
}
</style>